<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>天气案例</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id = "root">
       <h2>今天天气很{{info}}, {{x}}</h2>

       <!-- 绑定事件的时候， @xxx="yyyy" yyyy可以写一些简单的语句 -->
       <button @click="isHot = !isHot">切换天气</button>
       <button @click="changeWheter">切换天气</button>

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止 vue在启动时生成生产提示    
        // 创建vue实例
        const vm = new Vue({
            el: '#root', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                firstName: '徐',
                lastName: '亚远',
                isHot:true,
                x:1
            },
            computed: {
                info(){
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
           methods: {
            changeWheter(){
                this.x++
                this.isHot = !this.isHot
            }
           }
        })


    </script>


</body>

</html>